import React, { useState, useEffect } from "react";
import axios from "../../utils/request";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { NavBar } from "antd-mobile";
import { InfiniteScroll } from 'antd-mobile'
function List() {
  const navigate = useNavigate();
  const { start, end, date } = useSelector((state) => state.citys);
  // console.log(asd)
  const [list, setList] = useState([]);
  const [page,setPage]= useState(1)

  const getlist = async () => {
    const res = await axios.post("/trip/train", { start, end,page });
    console.log(res);
    setList([...list,...res.data.data]);
    setPage(page+1)
  };
  useEffect(() => {
    getlist();
  }, []);

  const goxq = (v)=>{
    navigate('/xq',{state:v})
  }
  return (
    <div>
      <NavBar>
        {start} —— {end}
      </NavBar>
      <h1>{date}</h1>
      {list.map((v, i) => {
        return (
          <dl
            key={i}
            style={{
              width: "100%",
              height: "80px",
              borderBottom: "1px solid #ccc",
              marginTop: "10px",
            }}
            onClick={()=>{
                goxq(v)
            }}
          >
            <dt>
              <div>
                {v.start} —— {v.end}
              </div>
              <div>{v.isSpeed ? "高铁" : "非高铁"}</div>
              <div>{v.isSeat ? "有票" : "无票"}</div>
            </dt>
            <dd>
                ￥：<span style={{color:"red",fontWeight:"900"}}>{v.tick.vip}</span>
            </dd>
          </dl>
        );
      })}
      <InfiniteScroll loadMore={getlist} hasMore={true} />
    </div>
  );
}

export default List;
